Angular Material হল Angular অ্যাপ্লিকেশনের জন্য একটি UI কম্পোনেন্ট লাইব্রেরি যা আপনাকে প্রস্তুত তৈরি কম্পোনেন্টগুলোর মাধ্যমে একটি সুন্দর এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে সাহায্য করে। Angular Material থিমিং আপনাকে একটি কাস্টম স্টাইল এবং লুক অ্যান্ড ফিল (Look and Feel) প্রদান করতে সাহায্য করে।
Angular Material এর থিমিং সিস্টেমটি অত্যন্ত ফ্লেক্সিবল এবং আপনি বিভিন্ন রঙের স্কিম ব্যবহার করতে পারেন, যা সহজেই কাস্টমাইজ করা যায়। Angular Material থিমগুলি primary, accent, এবং warn রঙের ভিত্তিতে কাজ করে, যা একটি অ্যাপ্লিকেশনকে একটি নির্দিষ্ট রঙের স্কিম অনুযায়ী সাজানোর সুবিধা দেয়।
Angular Material থিমিং সিস্টেমের কিছু মূল উপাদান হল:
Angular Material-এ থিম কাস্টমাইজ করার জন্য SCSS (Sass) ব্যবহার করতে হয়। এই কাজটি styles.scss বা আপনার থিম ফাইলের মাধ্যমে করা যেতে পারে।
Angular Material ডিফল্টভাবে একটি থিম তৈরি করে, তবে আপনি এটি পরিবর্তন করতে পারেন। প্রথমে, আপনার অ্যাপ্লিকেশনে Angular Material ইনস্টল করতে হবে।
ng add @angular/material
এটি একটি ডিফল্ট থিম এবং অন্যান্য কম্পোনেন্ট লাইব্রেরি ইনস্টল করবে।
styles.scss ফাইলে ডিফল্ট থিম যোগ করা যাবে:
@import '~@angular/material/theming';
@include mat-core();
// Defining your custom theme
$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, 500);
$my-warn: mat-palette($mat-red);
$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
// Applying the theme
@include angular-material-theme($my-theme);
এখানে:
mat-palette() ফাংশনটি রঙের প্যালেট তৈরি করতে ব্যবহৃত হয়।mat-light-theme() অথবা mat-dark-theme() ব্যবহার করে আপনি লাইট অথবা ডার্ক থিম নির্বাচন করতে পারেন।angular-material-theme() হল থিমটি অ্যাপ্লিকেশনে প্রয়োগ করার জন্য।Angular Material এ ডার্ক থিম প্রয়োগ করতে, আপনি সহজেই mat-dark-theme ব্যবহার করতে পারেন।
$my-primary: mat-palette($mat-blue);
$my-accent: mat-palette($mat-orange);
$my-warn: mat-palette($mat-deep-orange);
$my-dark-theme: mat-dark-theme($my-primary, $my-accent, $my-warn);
@include angular-material-theme($my-dark-theme);
এখানে, mat-dark-theme() ব্যবহার করে আপনি ডার্ক থিম তৈরি করেছেন। এই থিমটি অ্যাপ্লিকেশনের সকল Material কম্পোনেন্টে ডার্ক মোড প্রয়োগ করবে।
আপনি যদি সম্পূর্ণ কাস্টম রঙ ব্যবহার করতে চান, তবে mat-palette() এর মধ্যে কাস্টম রঙের কোড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:
$my-primary: mat-palette($mat-teal, 600, 300, 900);
$my-accent: mat-palette($mat-orange, 500);
$my-warn: mat-palette($mat-red);
$my-custom-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
@include angular-material-theme($my-custom-theme);
এখানে mat-palette() এর মধ্যে রঙের কোডের বিভিন্ন শেড (যেমন 600, 300, 900) ব্যবহার করা হয়েছে।
আপনি যদি অ্যাপ্লিকেশনের মধ্যে লাইট এবং ডার্ক থিমের পরিবর্তন করতে চান, তবে আপনি JavaScript বা TypeScript ব্যবহার করে থিম সুইচিং করতে পারেন। উদাহরণস্বরূপ:
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
constructor(private sanitizer: DomSanitizer) { }
switchTheme(isDark: boolean) {
const themeLink = document.getElementById('theme-link') as HTMLLinkElement;
if (isDark) {
themeLink.href = 'assets/themes/dark-theme.css';
} else {
themeLink.href = 'assets/themes/light-theme.css';
}
}
}
এখানে, আপনি switchTheme() ফাংশন ব্যবহার করে থিম পরিবর্তন করছেন, যেখানে একটি CSS ফাইলের রেফারেন্স দিয়ে আপনি অ্যাপ্লিকেশনটি ডার্ক থিম বা লাইট থিমে সুইচ করতে পারবেন।
Angular Material থিমিং সিস্টেম একটি শক্তিশালী টুল যা আপনার অ্যাপ্লিকেশনকে সুন্দর এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি Angular Material-এর থিম কাস্টমাইজ করে একটি ইউনিফর্ম UI তৈরি করতে পারেন এবং ডার্ক অথবা লাইট থিমে পরিবর্তন করতে পারেন। থিমিংয়ের মাধ্যমে অ্যাপ্লিকেশনের রঙ স্কিম সহজেই কাস্টমাইজ করা সম্ভব, যা আপনার ব্র্যান্ড বা অ্যাপ্লিকেশনের স্টাইল অনুযায়ী মানানসই হয়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
